<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="onClickRight"></navBar>
    <div class="emptyBox"></div>
    <div class="con">
      <div class="trans">
        <div class="names">
          <div class="oneline xian" @click="showbiname = true" v-if="!biname">
            {{$t('请选择币种')}}
          </div>
          <div class="oneline xian" @click="showbiname = true" v-else>
            {{ biname }}
          </div>
          <div
            class="oneline xian"
            @click="showtobiname = true"
            v-if="!tobiname"
          >
            {{$t('请选择要兑换的币种')}}
          </div>
          <div class="oneline xian" @click="showtobiname = true" v-else>
            {{ tobiname }}
          </div>
        </div>
        <div class="qhimg" @click="change">
          <img src="../../assets/images/zichan/qiehuan.png" alt="" />
        </div>
      </div>

      <div class="title"> {{$t('兑换数量')}}</div>
      <div class="duihuan">
        <div class="name">{{ biname }}</div>
        <input type="number" v-model="num" :placeholder="biname == 'CNY' ? $t('请输入金额')  : $t('请兑换提币数量')" />
        <div class="all" @click="allmoney()"> {{$t('全部兑换')}}</div>
      </div>
      <div class="boxs">
        <div class="onebox">
          <span> {{$t('兑换汇率')}}</span>
          <div class="num">{{ duihuan }}</div>
        </div>
        <div class="onebox">
          <span> {{$t('可用')}}{{ biname }}</span>
          <div class="num">
            {{
              biname == "USDT"
                ? canuseUSDT
				: biname == "CNY"
				? canuseCNY
                : "0"
            }}
          </div>
        </div>
        <div class="onebox">
          <span> {{$t('可得')}}{{ tobiname }}</span>
          <div class="num">{{kede}}</div>
        </div>
        <div class="onebox">
          <span> {{$t('手续费比例')}}</span>
          <div class="num">{{fee*100}}%</div>
        </div>
        <div class="onebox">
          <span> {{$t('手续费')}}</span>
          <div class="num">{{shouxu}}</div>
        </div>
      </div>
      <div class="btn">
        <van-button type="info" size="large" @click="sub">{{$t('兑换')}}</van-button>
      </div>
    </div>
    <!-- 选择币种 -->
    <van-popup v-model="showbiname" position="bottom">
      <van-picker
        title=""
        show-toolbar
        :columns="columns"
        @confirm="onConfirm1"
        @cancel="cancel1"
      />
    </van-popup>
    <van-popup v-model="showtobiname" position="bottom">
      <van-picker
        title=""
        show-toolbar
        :columns="columns"
        @confirm="onConfirm2"
        @cancel="cancel2"
      />
    </van-popup>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("兑换"),
        close: false,
        btn: "",
        isBlue: true,
      },
      num: "",
      qiehuan: 1,
      biname: "",
      tobiname: "",
      showbiname: false,
      showtobiname: false,
      columns: ["USDT", "CNY"],
      canuseUSDT: 0,
      canuseETH: 0,
      canuseBTC: 0,
	  canuseUSDC:0,
	  canuseCNY:0,
      fee:0,
      shouxu:0,
      kede:0,
	  duihuan:0
    };
  },

  mounted() {
    this.getzichanlist();
  },
  watch: {
    num(val) {
      if (this.biname == "" || this.tobiname == "") {
        this.$toast(this.$t('请先选择币种'));
        return;
      }
      this.num = val;
      this.getExchangeData();
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "onlineService",
      });
    },
	allmoney(){
		
		this.num = this.biname == "USDT"
                ? this.canuseUSDT
				: this.biname == "CNY"
				? this.canuseCNY
                : "0";
	},
    //获取可用余额
    getzichanlist() {
      $postAxios(api.getAssets, {}, (res) => {
        for (var i of res.data) {
          if (i.EN_name == "USDT") {
            this.canuseUSDT = i.money;
          }
          if (i.EN_name == "ETH") {
            this.canuseETH = i.money;
          }
          if (i.EN_name == "BTC") {
            this.canuseBTC = i.money;
          }if (i.EN_name == "USDC") {
            this.canuseUSDC = i.money;
          }
		  if (i.EN_name == "CNY") {
		    this.canuseCNY = i.money;
		  }
        }
      });
    },
    //切换币种
    change() {
      if (this.biname.length > 4) {
        return;
      }
      var a = this.biname;
      this.biname = this.tobiname;
      this.tobiname = a;
    },
    onConfirm1(e) {
      console.log(e);
      this.biname = e;
      this.showbiname = false;
    },
    cancel1() {
      this.showbiname = false;
    },
    cancel2() {
      this.showtobiname = false;
    },
    onConfirm2(e) {
      console.log(e);
      this.tobiname = e;
      this.showtobiname = false;
    },
    //获取闪兑价格
    getExchangeData() {
      $postAxios(
        api.getExchangeData,
        {
          biname: this.biname,
          tobiname: this.tobiname,
          num: this.num,
        },
        (res) => {
          this.fee = res.data.fee;
          this.kede = res.data.kede;
          this.shouxu = this.num * res.data.fee
		  this.duihuan = res.data.huilv
        }
      );
    },
    //提交
    sub() {
      $postAxios(
        api.exchange,
        {
          biname: this.biname,
          tobiname: this.tobiname,
          num: this.num,
        },
        (res) => {
         
          if (res.code == 0) {
			this.$toast(this.$t("成功"));
			let _this = this;
			setTimeout(function(){
				_this.getzichanlist();
			},1000);
            
          }else{
			   this.$toast(this.$t(res.msg));
		  }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: rgba(247, 246, 251, 1);
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  .con {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
    .trans {
      width: 100%;
      height: 91px;
      background-color: #ffffff;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      .names {
        flex: 1;
        .oneline {
          padding: 14px 25px;
          box-sizing: border-box;
          font-size: 12px;
          color: #333333;
          font-weight: bold;
        }
        .xian {
          border-bottom: 0.5px solid rgb(241, 243, 244);
        }
      }
      .qhimg {
        width: 71px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 0.5px solid #f1f3f4;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .title {
      padding: 10px 0 5px;
      font-size: 14px;
      color: #929292;
      font-weight: 500;
    }
    .duihuan {
      width: 100%;
      height: 50px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px;
      .name {
        font-size: 18px;
        color: #333333;
        font-weight: bold;
      }
      input {
        flex: 1;
        box-sizing: border-box;
        padding: 0 10px;
        height: 40px;
        font-size: 14px;
        border: 0px;
      }
      .all {
        font-size: 12px;
        color: rgb(0, 122, 255);
      }
    }
    .boxs {
      width: 100%;
      height: 154px;
      background: #ffffff;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      border-radius: 15px;
      margin-top: 18px;
      background-color: #fff;
      display: flex;
      align-content: center;
      justify-content: space-around;
      flex-wrap: wrap;
      .onebox {
        width: 33%;
        height: 77px;
        text-align: center;
        span {
          font-size: 12px;
          color: #929292;
        }
        .num {
          font-size: 12px;
          color: #333333;
          font-weight: bold;
        }
      }
    }
    .btn {
      width: 100%;
      box-sizing: border-box;
      padding: 40px 0;
      .van-button--large {
        height: 40px !important;
      }
    }
  }
}
</style>
